<template>
  <div class="newsinfo-container">
    <!-- $route.params.id 获取id的方法 -->
    <!-- 标题 -->
    <h3 class="title"> {{ newsinfo.title }} </h3>
    <!-- 子标题 -->
    <p class="subtitle">
      <span>发表时间: {{ newsinfo.add_time | dataFormat }} </span>
      <span>点击 {{ newsinfo.click }} 次</span>
    </p>
    <hr>
    <!-- 内容区 -->
    <div class="content">
      固定内容，没有从后台获取数据
    </div>
    <!-- 评论区 -->
    <commentBox></commentBox>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import comment from '../subcomponents/comment.vue'

export default {
  data() {
    return {
      id: this.$route.params.id ,// 将URL 地址中传递过来的 Id值，挂载到data上，方便以后调用
      newsinfo: {} // 新闻对象
    };
  },
  created() {
      this.getNewsinfo();
  },
  methods: {
    getNewsinfo() {
      // 获得新闻详情
      this.$http.get("api/getnew/:newid") // 后端接口  视频提供api失效，需自己手写。
      .then(result => {
          if (result.body.status === 0) {
            //  成功
            this.newsinfo = result.body.message[0];
          } else {
            // 失败
            Toast("获取新闻详情失败！");
          }
        });
    }
  },
  components: { // 用来注册子组件的节点
  'commentBox': comment
  }
};
</script>

<style lang="scss">

.newsinfo-container {
    padding: 0 5px;
    .title {
        text-align: center;
        color: #f00;
        font-size: 16px;
        line-height: 24px;
    }
    .subtitle {
        display: flex;
        justify-content: space-between;
    }
}
</style>
